Design tokens
Tokens for your designs
#Import design tokens
#Choose format
#Choose theme
#Copy import statement
import "@siteimprove/fancylib/design-tokens/variables.css;"#Colors
#Neutrals
var(--color--white) | #ffffff |
var(--color--gray--lightest) | #F6F6F6 |
var(--color--gray--lighter) | #EDEDED |
var(--color--gray--light) | #A6A6A7 |
var(--color--gray) | #767676 |
var(--color--gray--dark) | #4D4D50 |
var(--color--gray--darker) | #202124 |
var(--color--gray--darkest) | #18191B |
var(--color--black) | #000000 |
#Blue
var(--color--blue--lightest) | #9eb7ed |
var(--color--blue--lighter) | #6e94e5 |
var(--color--blue--light) | #3d70dc |
var(--color--blue) | #0d4cd3 |
var(--color--blue--dark) | #0a399e |
var(--color--blue--darker) | #07266a |
var(--color--blue--darkest) | #031335 |
#Teal
var(--color--teal--lightest) | #d5fbfb |
var(--color--teal--lighter) | #95f4f4 |
var(--color--teal--light) | #23e8e8 |
var(--color--teal) | #1CBCBD |
var(--color--teal--dark) | #169191 |
var(--color--teal--darker) | #127474 |
var(--color--teal--darkest) | #093a3a |
#Green
var(--color--green--lightest) | #b3efcf |
var(--color--green--lighter) | #8ee6b8 |
var(--color--green--light) | #68dea0 |
var(--color--green) | #42d688 |
var(--color--green--dark) | #32a166 |
var(--color--green--darker) | #216b44 |
var(--color--green--darkest) | #103622 |
#Yellow
var(--color--yellow--lightest) | #fff7d3 |
var(--color--yellow--lighter) | #ffea92 |
var(--color--yellow--light) | #ffdc49 |
var(--color--yellow) | #ffd31c |
var(--color--yellow--dark) | #bf9e15 |
var(--color--yellow--darker) | #806a0e |
var(--color--yellow--darkest) | #403507 |
#Red
var(--color--red--lightest) | #ffb8c0 |
var(--color--red--lighter) | #ff94a1 |
var(--color--red--light) | #ff7181 |
var(--color--red) | #ff4d62 |
var(--color--red--dark) | #bf3a4a |
var(--color--red--darker) | #802731 |
var(--color--red--darkest) | #401319 |
#Orange
var(--color--orange--lightest) | #ffd1bb |
var(--color--orange--lighter) | #ffba98 |
var(--color--orange--light) | #ffa376 |
var(--color--orange) | #ff8c54 |
var(--color--orange--dark) | #bf693f |
var(--color--orange--darker) | #80462a |
var(--color--orange--darkest) | #402315 |
#Purple
var(--color--purple--lightest) | #f3ebfe |
var(--color--purple--lighter) | #d1cbfd |
var(--color--purple--light) | #a9a1f4 |
var(--color--purple) | #7a63c7 |
var(--color--purple--dark) | #5f4eaa |
var(--color--purple--darker) | #413673 |
var(--color--purple--darkest) | #010125 |
#Pink
var(--color--pink--lightest) | #feebf4 |
var(--color--pink--lighter) | #fdcbe1 |
var(--color--pink--light) | #f4a1b5 |
var(--color--pink) | #dd4889 |
var(--color--pink--dark) | #ce3f81 |
var(--color--pink--darker) | #b42367 |
var(--color--pink--darkest) | #4b112c |
#Chart: default
var(--color--chart--1) | |
var(--color--chart--2) | |
var(--color--chart--3) | |
var(--color--chart--4) | |
var(--color--chart--5) | |
var(--color--chart--6) | |
var(--color--chart--7) | |
var(--color--chart--8) |
#Heatrange: warm
var(--color--heat--warm--1) | #3EC67B |
var(--color--heat--warm--2) | #42D688 |
var(--color--heat--warm--3) | #68D985 |
var(--color--heat--warm--4) | #8EDC82 |
var(--color--heat--warm--5) | #B3DF80 |
var(--color--heat--warm--6) | #D9E27D |
var(--color--heat--warm--7) | #FFE57A |
var(--color--heat--warm--8) | #FFC76D |
var(--color--heat--warm--9) | #FFAA61 |
var(--color--heat--warm--10) | #FF8C54 |
var(--color--heat--warm--11) | #FF6D5B |
var(--color--heat--warm--12) |
#Heatrange: cool
var(--color--heat--cool--1) | #E7EDFB |
var(--color--heat--cool--2) | #CFDBF6 |
var(--color--heat--cool--3) | #B6C9F2 |
var(--color--heat--cool--4) | |
var(--color--heat--cool--5) | |
var(--color--heat--cool--6) | |
var(--color--heat--cool--7) | |
var(--color--heat--cool--8) | #0A3DA9 |
var(--color--heat--cool--9) | #082E7F |
var(--color--heat--cool--10) | #051E54 |
#Scales: cool
var(--color--scale--cool--1) | |
var(--color--scale--cool--2) | |
var(--color--scale--cool--3) | |
var(--color--scale--cool--4) |
#Scales: warm
var(--color--scale--warm--1) | |
var(--color--scale--warm--2) | |
var(--color--scale--warm--3) | |
var(--color--scale--warm--4) |
#Status
var(--color--status--positive--dark) | |
var(--color--status--positive--light) | |
var(--color--status--positive--light--foreground) | |
var(--color--status--warning--dark) | |
var(--color--status--warning--dark--foreground) | |
var(--color--status--warning--neutral) | |
var(--color--status--warning--light) | |
var(--color--status--warning--light--foreground) | |
var(--color--status--negative--dark) | |
var(--color--status--negative--light) | #FFEDEF |
var(--color--status--negative--light--foreground) | |
var(--color--status--subtle--dark) | |
var(--color--status--subtle--light) | |
var(--color--status--subtle--light--foreground) | |
var(--color--status--neutral--dark) | |
var(--color--status--neutral--light) | |
var(--color--status--neutral--light--foreground) | |
var(--color--status--highlight1--dark) | |
var(--color--status--highlight1--light) | |
var(--color--status--highlight1--light--foreground) | |
var(--color--status--highlight2--dark) | |
var(--color--status--highlight2--light) | |
var(--color--status--highlight3--dark) | |
var(--color--status--highlight3--light) | |
var(--color--status--highlight3--light--foreground) |
#Border colors
var(--color--border--separator) | |
var(--color--border--interactive--default) | |
var(--color--border--interactive--error) | |
var(--color--border--interactive--hover) | |
var(--color--border--interactive--active) | |
var(--color--border--interactive--selected) | |
var(--color--border--interactive--disabled) |
#Background colors
var(--color--border--interactive--active--checked) | |
var(--color--background--main--page) | #F7F8FD |
var(--color--background--interactive--default) | |
var(--color--background--interactive--hover) | |
var(--color--background--interactive--active) | #CFDBF6 |
var(--color--background--interactive--active--checked) | |
var(--color--background--interactive--selected) | #E7EDFB |
var(--color--background--interactive--disabled) | |
var(--color--background--static--primary) | |
var(--color--background--static--secondary) |
#Toast color
var(--color--toast--background--warning) | |
var(--color--toast--color--warning) | |
var(--color--toast--foreground--warning) |
#Button color
var(--color--button--disabled--foreground) | |
var(--color--button--default--foreground) | |
var(--color--button--default--background) | |
var(--color--button--default--border) | |
var(--color--button--default--hover--border) | |
var(--color--button--default--hover--shadow) | |
var(--color--button--default--focus--shadow) | |
var(--color--button--default--active--background) | |
var(--color--button--default--active--border) | |
var(--color--button--default--active--foreground) | |
var(--color--button--primary--foreground) | |
var(--color--button--primary--background) | |
var(--color--button--primary--border) | |
var(--color--button--primary--hover--border) | |
var(--color--button--primary--hover--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--blue--dark) |
var(--color--button--primary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--blue) |
var(--color--button--primary--active--background) | |
var(--color--button--primary--active--border) | |
var(--color--button--primary--active--foreground) | |
var(--color--button--secondary--foreground) | |
var(--color--button--secondary--background) | |
var(--color--button--secondary--border) | |
var(--color--button--secondary--hover--border) | |
var(--color--button--secondary--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--blue--darker) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--secondary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--blue--darker) |
var(--color--button--secondary--active--background) | |
var(--color--button--secondary--active--border) | |
var(--color--button--secondary--active--foreground) | |
var(--color--button--destructive--foreground) | |
var(--color--button--destructive--background) | |
var(--color--button--destructive--border) | |
var(--color--button--destructive--hover--border) | |
var(--color--button--destructive--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--red--dark) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--destructive--focus--shadow) | var(--shadow--focus--base), var(--size--shadow--focus--outer) var(--color--red--dark) |
var(--color--button--destructive--active--background) | |
var(--color--button--destructive--active--border) | |
var(--color--button--destructive--active--foreground) | |
var(--color--button--borderless--foreground) | |
var(--color--button--borderless--background) | transparent |
var(--color--button--borderless--border) | transparent |
var(--color--button--borderless--hover--border) | |
var(--color--button--borderless--hover--shadow) | |
var(--color--button--borderless--focus--shadow) | |
var(--color--button--borderless--active--background) | |
var(--color--button--borderless--active--border) | |
var(--color--button--borderless--active--foreground) | |
var(--color--button--cta--default--foreground) | |
var(--color--button--cta--default--background) | |
var(--color--button--cta--default--border) | |
var(--color--button--cta--default--hover--border) | |
var(--color--button--cta--default--hover--shadow) | |
var(--color--button--cta--default--focus--shadow) | |
var(--color--button--cta--default--active--background) | |
var(--color--button--cta--default--active--border) | |
var(--color--button--cta--default--active--foreground) | |
var(--color--button--cta--primary--foreground) | |
var(--color--button--cta--primary--background) | |
var(--color--button--cta--primary--border) | |
var(--color--button--cta--primary--hover--border) | |
var(--color--button--cta--primary--hover--shadow) | var(--size--shadow--hover) rgba(38, 34, 124, var(--opacity--shadow--hover)) |
var(--color--button--cta--primary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--blue--dark) |
var(--color--button--cta--primary--active--background) | |
var(--color--button--cta--primary--active--border) | |
var(--color--button--cta--primary--active--foreground) | |
var(--color--button--cta--secondary--foreground) | |
var(--color--button--cta--secondary--background) | |
var(--color--button--cta--secondary--border) | |
var(--color--button--cta--secondary--hover--border) | |
var(--color--button--cta--secondary--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--blue--darker) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--cta--secondary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--blue--darker) |
var(--color--button--cta--secondary--active--background) | |
var(--color--button--cta--secondary--active--border) | |
var(--color--button--cta--secondary--active--foreground) |
#Legacy mapping
var(--color--button--cta--secondary--not--active) | |
var(--color--button--cta--secondary--active) | |
var(--color--button--secondary--not--active) | |
var(--color--button--secondary--not--active--hover--border) | |
var(--color--button--secondary--active) |
#Text colors
var(--color--typography--tone--subtle) | |
var(--color--typography--tone--positive) | |
var(--color--typography--tone--negative) | |
var(--color--typography--tone--warning) | |
var(--color--text--interactive--dark--default) | |
var(--color--text--interactive--light--default) | |
var(--color--text--interactive--disabled) | |
var(--color--text--static--header) | |
var(--color--text--static--body) | |
var(--color--text--highlight--light--foreground) | #222222 |
var(--color--text--highlight--light--background) | #fff8cc |
var(--color--text--highlight--dark--foreground) | |
var(--color--text--highlight--dark--background) | transparent |
#Navigation colors
var(--color--navigation--top--background) | var(--color--blue) |
var(--color--navigation--background) | #202124 |
var(--color--navigation--foreground) | |
var(--color--navigation--hover) | #4D4D50 |
var(--color--navigation--active) | #4D4D50 |
var(--color--navigation--active--foreground) | |
var(--color--navigation--active--border) | |
var(--color--navigation--divider) | #39394d |
#Search Navigation colors
var(--color--search-navigation--text--default) | |
var(--color--search-navigation--text--secondary) | |
var(--color--search-navigation--background--default) | |
var(--color--search-navigation--background--hover) | |
var(--color--search-navigation--shadow--hover) | none |
var(--color--search-navigation--hover--outline) | |
var(--color--search-navigation--active--outline) | |
var(--color--search-navigation--results-section--border) | #4D4D50 |
var(--color--search-navigation--results-item--hover) | |
var(--color--search-navigation--results-item--active) | |
var(--color--search-navigation--results-item--highlight--theme) | dark |
#Typography
#Font-family
var(--font-family--default) | 'Inter', arial, sans-serif |
var(--font-family--alternative) | 'Inter', arial, sans-serif |
var(--font-family--code) | 'Roboto Mono', courier, sans-serif |
var(--font-family--heading) | 'Geologica', arial, sans-serif |
var(--font-family--display) | 'Geologica', arial, sans-serif |
#Font-size
var(--font-size--xx-small) | 0.625rem (10px) |
var(--font-size--x-small) | 0.75rem (12px) |
var(--font-size--small) | 0.875rem (14px) |
var(--font-size--medium) | 1rem (16px) |
var(--font-size--large) | 1.125rem (18px) |
var(--font-size--x-large) | 1.375rem (22px) |
var(--font-size--xx-large) | 1.6875rem (27px) |
var(--font-size--xxx-large) | 2rem (32px) |
var(--font-size--interactive--default) | var(--font-size--small) |
#Font-weight
var(--font-weight--normal) | 400 |
var(--font-weight--medium) | 500 |
var(--font-weight--bold) | 700 |
var(--font-weight--interactive--default) | var(--font-weight--normal) |
var(--font-weight--interactive--selected) | var(--font-weight--medium) |
#Line-height
var(--line-height--reset) | 1 |
var(--line-height--x-small) | 1.1 |
var(--line-height--small) | 1.3 |
var(--line-height--medium) | 1.4 |
var(--line-height--large) | 1.5 |
var(--line-height--x-large) | 1.6 |
#Size
var(--size--button--small) | 1.375rem (22px) |
var(--size--button--default) | 2rem (32px) |
var(--size--button--large) | 2.5rem (40px) |
var(--size--icon--small) | 0.75rem (12px) |
var(--size--icon--medium) | 1rem (16px) |
var(--size--icon--default) | 1.25rem (20px) |
var(--size--icon--responsive) | 1.25em |
var(--size--illustration--small) | 6rem (96px) |
var(--size--illustration--medium) | 8rem (128px) |
var(--size--illustration--default) | 12rem (192px) |
var(--size--pill--small) | 1.25rem (20px) |
var(--size--pill--default) | 1.375rem (22px) |
var(--size--pill--large) | 1.5rem (24px) |
var(--size--shadow--focus--inner) | 0 0 0 0.125rem (2px) |
var(--size--shadow--focus--outer) | 0 0 0 0.25rem (4px) |
var(--size--shadow--hover) | 0 0 0 0.1875rem (3px) |
#Space
var(--space--xx-small) | 0.25rem (4px) |
var(--space--x-small) | 0.5rem (8px) |
var(--space--small) | 0.75rem (12px) |
var(--space--medium) | 1rem (16px) |
var(--space--large) | 1.25rem (20px) |
var(--space--x-large) | 1.5rem (24px) |
var(--space--xx-large) | 2rem (32px) |
var(--space--xxx-large) | 2.5rem (40px) |
#Border radius
var(--border-radius--small) | 0.1875rem (3px) |
var(--border-radius--medium) | 0.3125rem (5px) |
var(--border-radius--rounded) | 125rem (2000px) |
#Opacity
var(--opacity--shadow--hover) | 0.2 |
#Box shadow
var(--shadow--layer--low) | 0 0.125rem 0.25rem 0 rgba(31, 43, 63, 0.08), 0 0.0625rem 0.125rem 0 rgba(31, 43, 63, 0.2) |
var(--shadow--layer--medium) | 0 0.25rem 0.5rem 0 rgba(31, 43, 63, 0.12), 0 0.125rem 0.25rem 0 rgba(31, 43, 63, 0.08) |
var(--shadow--layer--high) | 0 0.5rem 0.75rem 0 rgba(31, 43, 63, 0.16), 0 0.25rem 0.375rem 0 rgba(31, 43, 63, 0.04) |
var(--shadow--focus--base) | var(--size--shadow--focus--inner) var(--color--white) |
var(--shadow--focus--default) | var(--shadow--focus--base), var(--size--shadow--focus--outer) var(--color--blue) |
var(--shadow--focus--inner) | inset var(--size--shadow--focus--inner) var(--color--blue) |
var(--shadow--hover--default) | var(--size--shadow--hover) rgba(27, 78, 161, var(--opacity--shadow--hover)) |
var(--shadow--hover--error) | var(--size--shadow--hover) rgba(232, 70, 94, var(--opacity--shadow--hover)) |
var(--shadow--hover--left) | inset 0.1875rem 0 0 0 var(--color--gray--light) |
var(--shadow--selected) | inset 0.1875rem 0 var(--color--blue), inset 0 0.0625rem var(--color--blue), inset -0.0625rem 0 var(--color--blue), inset 0 -0.0625rem var(--color--blue) |
var(--shadow--selected--bottom) | inset 0 -0.1875rem 0 0 var(--color--blue) |
var(--shadow--selected--left) | inset 0.1875rem 0 var(--color--blue) |
#Layout
var(--layout--small) | 36rem (576px) |
var(--layout--medium) | 48rem (768px) |
var(--layout--large) | 62rem (992px) |
var(--layout--x-large) | 75rem (1200px) |
var(--layout--xx-large) | 100rem (1600px) |
#Animation
var(--animation--fast) | 0.1s |
var(--animation--medium) | 0.2s |
var(--animation--slow) | 0.3s |